<template>
  <div class="business-root">
    <div class="white-card detail-">
      <div class="rymx-title-c flex flex-between">
        <div class="text-">人员明细</div>
        <div class="flex flex-between tabs">
          <div
            v-for="(item, idx) in rymxTabs.tabs"
            :key="idx"
            :class="`tab ${item === rymxTabs.active && 'active'}`"
            @click="handleChangeTab(item)"
          >
            <span class="border"></span>
            <div class="text">{{ item }}</div>
          </div>
        </div>
      </div>
      <van-loading v-if="loading" type="spinner" color="#1989fa" />

      <template v-if="rymx_.length && !loading">
        <div class="rymx-card" v-for="(item, idx) in rymx_" :key="idx + 'rymx'">
          <div class="flex">
            <img class="icon p1" src="~@assets/imgs/businessLine/rymx_user.png" alt="" />
            <span class="name">{{ item.level_name }}</span>
            <span class="tag">{{ item.stm_post_name }}</span>
          </div>
          <div class="kv-s">
            <template v-for="(ite, inde) in rymxDataConfig">
              <div v-if="ite.title != '移网手机'" :key="inde">
                <div class="k-title flex">
                  <img class="icon-" :src="require(`../../../../../../../assets/imgs/reconsitution/${ite.icon}.png`)" />
                  <span>{{ ite.title }}</span>
                </div>
                <div class="grid-2">
                  <div v-for="(it, ind) in ite.list" :key="ind + 'ind'" class="flex flex-between">
                    <div class="k-">
                      {{ it.label }}
                    </div>
                    <div
                      class="v-"
                      :class="{ 'num-underline': Number(item[dataModel[it.model]]) > 0 }"
                      @click="
                        $emit('openDialog', {
                          num: item[dataModel[it.model]],
                          clickType: ite.model === 'zjcptotal' ? 'zjcp' : 'normal',
                          params: { kpiCode: it.kpiCode, staffId: item.staff_id },
                          panelType: it.kpiCode.indexOf('JF') > -1 ? 'jf' : 'fz',
                        })
                      "
                    >
                      {{ item[dataModel[it.model]] || 0 }}/{{ item[dataModel[it.mbModel]] || 0 }}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>

        <div class="see-more" v-if="allListLength > rymx_.length" @click="handleShowMore">查看更多</div>
      </template>
      <div v-if="!rymx_.length && !loading" class="no-data-container"></div>
    </div>
  </div>
</template>
<script>
import { _ywsjListV2, _kdListV2, _zjcpIPTVListV2, jfListConfig } from '../../common'

let _list = []
const jfIconList = ['chkb_ywsj', 'chkb_kd', 'chkb_kd']
const _config = {
  发展: [
    {
      title: '移网手机',
      model: 'ywsjtotal',
      icon: 'fz_ywsj',
      list: _ywsjListV2,
    },
    {
      title: '宽带',
      model: 'kdtotal',
      icon: 'fz_kd',
      list: _kdListV2,
    },
    {
      title: '智家产品',
      model: 'zjcptotal',
      icon: 'fz_kd',
      list: _zjcpIPTVListV2,
    },
  ],
  交付: jfListConfig.map((item, index) => {
    return {
      ...item,
      icon: jfIconList[index],
    }
  }),
}

export default {
  name: 'GdwyyAppRymx',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    dataModel: {
      type: Object,
      default: () => {
        return {}
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rymxTabs: {
        tabs: ['发展', '交付'],
        active: '发展',
      },

      rymx: [],
      rymx_: [],
      allListLength: 0,
    }
  },

  computed: {
    rymxDataConfig() {
      return _config[this.rymxTabs.active]
    },
  },
  watch: {
    data: {
      immediate: true,
      handler(nv, ov) {
        if (!nv || !nv.length || ov.length) return
        this.rymxHooks(nv)
      },
    },
  },
  methods: {
    handleChangeTab(id) {
      if (id === this.rymxTabs.active) return
      this.rymxTabs.active = id
    },
    rymxHooks(data) {
      // 缓存
      _list = data.map((item, index) => {
        Object.keys(item).forEach((key) => {
          if (item[key] === 'null' || !item[key]) {
            item[key] = String(0)
          }
        })
        return item
      })
      this.allListLength = data.length
      this.handleShowMore()
    },
    handleShowMore() {
      let res = _list.splice(0, 3)
      this.rymx_.push(...res)
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.see-more {
  font-size: 3.2vw;
  color: #999999;
  letter-spacing: -0.0373vw;
  margin: 3.2vw auto 3.4667vw;
  text-align: center;
}
.num-underline {
  text-decoration: underline;
}
.flex {
  display: flex;
  align-items: center;
}

.flex-between {
  justify-content: space-between;
}

.center {
  justify-content: center;
  text-align: center;
  align-items: center;
}

.bold {
  font-weight: bold;
}

.business-root {
  padding: 0 2.1333vw;

  .white-card {
    background-color: #fff;
    border-radius: 1.6vw;
    padding: 3.2vw 2.1333vw;
  }

  .detail- {
    .rymx-title-c {
      margin-top: 3.0667vw;

      .tabs {
        column-gap: 8vw;
        font-size: 3.4667vw;
        color: #999999;

        .border {
          visibility: hidden;
        }

        .active {
          color: #4d98ff;
          position: relative;

          .text {
            z-index: 2;
            position: relative;
          }

          .border {
            visibility: unset;
            position: absolute;
            content: '';
            background-color: #e1ecfd;
            height: 1.3333vw;
            border-radius: 0.5333vw;
            left: 0;
            right: 0;
            bottom: 0;
          }
        }
      }

      .text- {
        font-size: 4.2667vw;
        color: #000000;
        position: relative;
        padding-left: 2.1333vw;

        &::before {
          position: absolute;
          content: '';
          width: 1.0667vw;
          height: 4.8vw;
          background: #4d98ff;
          border-radius: 0.5333vw;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
    }

    .rymx-card {
      background: rgba(77, 152, 255, 0.03);
      border-radius: 1.6vw;
      margin-top: 3.2vw;
      padding: 2.1333vw 2.6667vw;

      .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 7.04vw;
        row-gap: 2.4vw;
      }

      .p1 {
        grid-row: span 2;
        width: 8vw;
        height: 8vw;
        align-self: center;
      }

      .name {
        font-size: 4vw;
        color: #333333;
        letter-spacing: -0.0453vw;
        font-weight: bold;
        line-height: 5.6vw;
        padding: 0 3.4667vw 0 0.8vw;
      }

      .tag {
        line-height: 4.2667vw;
        box-sizing: border-box;
        font-size: 3.2vw;
        color: #4d98ff;
        letter-spacing: -0.0373vw;
        padding: 0 1.6vw;
        border: 0.2667vw solid #4d98ff;
        border-radius: 0.8vw 4.2667vw 0.8vw 4.2667vw;
      }

      .k-title {
        font-size: 3.7333vw;
        color: #333333;
        letter-spacing: -0.0427vw;
        line-height: 5.3333vw;
        margin: 4.5333vw 0 2.9333vw;

        &:first-child {
          margin-top: 3.7333vw;
        }

        .icon- {
          width: 3.7333vw;
          height: 3.7333vw;
          margin-right: 1.6vw;
        }
      }

      .k- {
        font-size: 3.2vw;
        color: #666666;
        line-height: 4.5333vw;
        letter-spacing: -0.0373vw;
        margin-bottom: 1.0667vw;
      }

      .v- {
        font-size: 3.7333vw;
        line-height: 5.3333vw;
        color: #fd806e;
        letter-spacing: -0.0427vw;
      }
    }
  }
}

.rymx-card-nojf {
  display: grid;
  grid-template-columns: 10.6667vw auto;
  column-gap: 3.7333vw;
  row-gap: 3.2vw;
  background: rgba(77, 152, 255, 0.03);
  border-radius: 1.6vw;
  margin-top: 3.2vw;
  padding: 2.1333vw 2.6667vw;

  .p1 {
    grid-row: span 2;
    width: 10.6667vw;
    height: 10.6667vw;
    align-self: center;
  }

  .name {
    font-size: 4vw;
    color: #333333;
    letter-spacing: -0.0453vw;
    font-weight: bold;
    line-height: 5.6vw;
  }

  .tag {
    line-height: 4.2667vw;
    box-sizing: border-box;
    font-size: 3.2vw;
    color: #4d98ff;
    letter-spacing: -0.0373vw;
    padding: 0 1.6vw;
    margin-left: 3.4667vw;
    border: 0.2667vw solid #4d98ff;
    border-radius: 0.8vw 4.2667vw 0.8vw 4.2667vw;
  }

  .kv-s {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .k- {
    font-size: 3.2vw;
    color: #666666;
    line-height: 4.5333vw;
    letter-spacing: -0.0373vw;
    margin-bottom: 1.0667vw;
  }

  .v- {
    // font-weight: bold;
    font-size: 3.7333vw;
    line-height: 5.3333vw;
    color: #fd806e;
    letter-spacing: -0.0427vw;
  }
}
</style>